<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style_init.css">
    <style>
        input[value] {
            color: red;
        }
        input[type=password] {
            color: royalblue;
            height: 16px;
            width: 150px;
            font-size: 30px;
        }
        div[class=aaa] {
            color: red;
        }
        /* 交集选择器 选择器之间没有空格 */
        div.aaa {
            color: green;
        }
        /* ul li:first-child {
            color: blue;
        }
        ul li:last-child {
            color: red;
        } */
        ul li:nth-child(even) {
            background-color: red;
        }
        ol li:nth-child(-n + 4) {
            background-color: rosybrown;
        }
        section div:nth-of-type(2) {
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text">

    <input type="password">
    <div class="aaa">aaa</div>

    <ul>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
    </ul>
    <br>
    <br>
    <ol>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
        <li>hello little bear!</li>
    </ol>
    <br><br>
    <section>
        <p>小熊</p>
        <div>小兔子</div>
        <div>大猩猩</div>
    </section>
</body>
</html>